import React from 'react';
import { useTranslation } from 'react-i18next';
import './NodePanel.css';

const NodePanel = () => {
  const { t } = useTranslation();

  const onDragStart = (event: React.DragEvent, nodeType: string) => {
    event.dataTransfer.setData('application/reactflow', nodeType);
    event.dataTransfer.effectAllowed = 'move';
  };

  return (
    <aside className="node-panel">
      <div className="panel-title">{t('nodes.panelTitle')}</div>
      <div className="panel-description">{t('nodes.panelDescription')}</div>
      
      <div className="node-category">{t('nodes.categoryData')}</div>
      <div 
        className="dnd-node data-node" 
        onDragStart={(event) => onDragStart(event, 'read_csv')} 
        draggable
      >
        {t('nodes.read_csv')}
      </div>

      <div className="node-category">{t('nodes.categoryPreprocessing')}</div>
      <div 
        className="dnd-node pre-node" 
        onDragStart={(event) => onDragStart(event, 'select_columns')} 
        draggable
      >
        {t('nodes.select_columns')}
      </div>
       <div 
        className="dnd-node pre-node" 
        onDragStart={(event) => onDragStart(event, 'inspect_data')} 
        draggable
      >
        {t('nodes.inspect_data')}
      </div>

      <div className="node-category">{t('nodes.categoryTraining')}</div>
      <div 
        className="dnd-node train-node" 
        onDragStart={(event) => onDragStart(event, 'random_forest_train')} 
        draggable
      >
        {t('nodes.random_forest_train')}
      </div>

    </aside>
  );
};

export default NodePanel;